<template>
  <template v-for="item of data" >
    <!-- 多个根节点时要使用v-bind="$attrs" 才能实现attribute继承 -->
    <li
        class="book-item"
        v-if="item.isSubscribe"
        :key="item.id"
        v-bind="$attrs"
    >
    <span>{{ item.title }}</span>
    <!-- 自定义属性存放在dataset里面  要用data- 开头的形式定义  -->
    <button :data-id="item.id">{{ item.subscribed ? '已订阅' : '订阅' }}</button>
    </li>
    <li
        v-else
        :key="item.id"
    >
    <span>{{ item.title }}</span>
    <button disabled>不可订阅</button>
    </li>
  </template>
</template>

<script>
export default {
    name: 'ListContent',
    props: {
        data : Array
    }
}
</script>

<style>
.book-item {
    cursor: pointer;
}
</style>